<template>
    <cover-view class="fixed-tabbar" :scroll-top="`${statusBarHeight + navHeight}px`">
        <cover-view
            class="tab"
            v-for="(item,index) in tab"
            :key="index"
            @click="change(index)"
        >
		<!-- :class="active == index && !showLabel ? 'change' : ''" -->
            <!-- <cover-view class="single" v-if="!showLabel">{{ item.label }}</cover-view> -->
            <cover-view
                class="double"
                :class=" active === index  ? 'change_color' : ''"
            >
                <cover-view class="p">{{ item.label }}</cover-view>
                <cover-view class="span">{{ item.value }}</cover-view>
            </cover-view>
        </cover-view>
    </cover-view>
</template>
<script>
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
    props: {
        tab: {
            type: Array,
            default: [],
        },
		// showLabel: {
		// 	type: Boolean,
		// 	default: true
		// },
		active: {
			type: Number,
			default: 0,
		}
    },
    components: {},
    data() {
        return {
            // active: 0,
			// statusBarHeight: 0,             // 状态栏的高度
			// navHeight: 0                    // 导航栏的高度
        };
    },
    computed: {
        ...mapState({
            statusBarHeight: state => state.init.data.statusBarHeight,
            navHeight: state => state.init.data.navHeight
        })
    },
    methods: {
        change(index) {
            this.$emit("change_status", index);
        },
    },
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
};
</script>
<style scoped lang='scss'>
@import "./index.scss";
.change {
    font-weight: 600;
    padding-bottom: 20rpx;
    position: relative;
    &:after {
        content: "";
        width: 32rpx;
        height: 8rpx;
        border-radius: 4rpx;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #ff504c;
    }
}
.change_color {
    .p {
        color: #ff4642 !important;
    }
    .span {
        line-height: 32rpx !important;
        border-radius: 999px;
        background-color: #ff4642;
        color: #fff !important;
    }
}
</style>